<wide-header-page title="{{title | translate}}" hideBackButton="true">
  <ion-buttons left>
    <button class="close-container disable-hover" (click)="close()" ion-button>
      <ion-icon ios="md-close" md="md-close"></ion-icon>
    </button>
  </ion-buttons>
  <div page-content>
    <ion-list *ngIf="btx" class="bp-list">
      <ion-item>
        <div class="header-container">
          <div class="amount-label" *ngIf="!(btx.amount === 0 && wallet.coin === 'eth')">
            <div class="amount">
              {{btx.amountValueStr}} {{btx.amountUnitStr | uppercase}}
            </div>
            <div class="alternative">
              <span *ngIf="!btx.fiatRateStr">...</span>
              <span *ngIf="btx.fiatRateStr">{{btx.fiatRateStr}}</span>
            </div>
          </div>
          <div class="sending-label" *ngIf="btx.amount === 0 && wallet.coin === 'eth'">
            <span>{{'Interaction with contract' | translate}}</span>
          </div>
        </div>
      </ion-item>

      <label-tip class="low-fees" type="warn" *ngIf="btx.action == 'received' && btx.lowAmount">
        <span label-tip-title translate>Amount Too Low To Spend</span>
        <div label-tip-body translate>
          This transaction amount is too small compared to current Bitcoin network fees. Spending these funds will need a Bitcoin network fee cost comparable to the funds itself.
          <br>
          <a class="label-tip-link" (click)="readMore()" translate>Learn More</a>
        </div>
      </label-tip>

      <ion-item class="sub-title">
        <ion-label>
          <div class="main-label" translate>DETAILS</div>
        </ion-label>
      </ion-item>

      <ion-item *ngIf="btx && btx.feeStr && btx.action != 'received'">
        <ion-label>
          <div class="summary-item">
            <span translate>Miner fee</span>
          </div>
        </ion-label>
        <ion-note item-end>
          <div class="summary-item-detail">
            {{btx.feeStr}}
          </div>
          <div class="secondary-note fee-details">
            {{btx.feeFiatStr}}
            <span *ngIf="btx.feeRateStr">
              &middot;
              <span>
                <span *ngIf="btx.feeRateStr">{{btx.feeRateStr}}
                  <span translate> of total amount</span>
                </span>
              </span>
            </span>
          </div>
        </ion-note>
      </ion-item>

      <label-tip *ngIf="btx.action == 'received' && btx.lowFees" type="danger">
        <span label-tip-title translate>Low Fee</span>
        <div label-tip-body translate>
          This transaction could take a long time to confirm or could be dropped due to the low fees set by the sender.
        </div>
      </label-tip>

      <div class="line-divider" *ngIf="btx.action === 'sent'"></div>

      <page-multiple-outputs *ngIf="btx.action === 'sent'" [tx]="btx" (openBlockChainEvent)="viewOnBlockchain()"></page-multiple-outputs>

      <div class="line-divider" *ngIf="btx.creatorName && isShared"></div>

      <ion-item *ngIf="btx.creatorName && isShared">
        <ion-label>
          <div class="summary-item">
            <span translate>Created by</span>
          </div>
        </ion-label>
        <ion-note item-end>
          <span class="note-container ellipsis summary-item-detail">{{btx.creatorName}}</span>
        </ion-note>
      </ion-item>

      <div class="line-divider"></div>

      <ion-item>
        <ion-label>
          <div class="summary-item">
            <span translate>Date</span>
          </div>
        </ion-label>
        <ion-note item-end>
          <span class="note-container ellipsis summary-item-detail">
            <time>{{ (btx.ts || btx.createdOn || btx.time) * 1000 | amDateFormat:'MM/DD/YYYY hh:mm a'}}</time>
          </span>
        </ion-note>
      </ion-item>

      <div class="line-divider"></div>

      <ion-item>
        <ion-label>
          <div class="summary-item">
            <span translate>Confirmations</span>
          </div>
        </ion-label>
        <ion-note item-end>
          <div class="summary-item-detail" *ngIf="!btx.confirmations || btx.confirmations == 0" translate>
            Unconfirmed
          </div>
          <div class="secondary-note fee-details" translate>
            <span *ngIf="btx.feeRate">
              <span translate>Fee rate</span>:
              {{btx.feeRate}}
            </span>
          </div>
          <span class="note-container ellipsis summary-item-detail" *ngIf="btx.confirmations>0 && !btx.safeConfirmed">
            {{btx.confirmations}}
          </span>
          <span class="note-container ellipsis summary-item-detail" *ngIf="btx.safeConfirmed">
            {{btx.safeConfirmed}}
          </span>
        </ion-note>
      </ion-item>

      <div *ngIf="!btx.confirmations || btx.confirmations == 0" class="unconfirmed-message">
        <a class="positive" (click)="openExternalLink('https://support.bitpay.com/hc/en-us/articles/360025484512-Missing-transactions-Why-is-my-transaction-unconfirmed-')">
          {{'Why is my transaction unconfirmed?' | translate}}
        </a>
      </div>

      <div class="line-divider"></div>

      <ion-item>
        <ion-label stacked>
          <div class="summary-item">{{'Memo' | translate}}</div>
        </ion-label>
        <ion-textarea class="summary-item-detail" placeholder="{{'Enter a transaction memo' | translate}}" (ionBlur)="saveMemoInfo()" [(ngModel)]="txMemo" name="tx.description" autocomplete="off" autocorrect="off"></ion-textarea>
      </ion-item>

      <div class="line-divider"></div>

      <ion-item>
        <ion-label>
          <div class="summary-item">
            <span translate>Transaction ID</span>
          </div>
        </ion-label>
        <ion-note item-end copy-to-clipboard="{{ btx.txid }}">
          <span class="note-container ellipsis summary-item-detail">
            <time>{{ btx.txid }}</time>
          </span>
        </ion-note>
      </ion-item>

      <ion-item *ngIf="txsUnsubscribedForNotifications">
        <ion-label>{{'Notify me if confirmed' | translate}}</ion-label>
        <ion-toggle checked="false" *ngIf="!btx.confirmations || btx.confirmations == 0" [(ngModel)]="txNotification.value" (ionChange)="txConfirmNotificationChange()"></ion-toggle>
      </ion-item>

      <div class="line-divider" *ngIf="actionList && actionList[0]"></div>

      <div *ngIf="actionList && actionList[0] && !wallet.credentials.multisigEthInfo">
        <ion-item detail-none>
          <div>{{'Timeline' | translate}}</div>
        </ion-item>
        <div class="timeline-item" [ngClass]="{'action-created' : a.type == 'created' || a.type == 'accept', 'action-rejected' : a.type == 'reject'}" *ngFor="let a of actionList; let i = index">
          <div class="timeline-content">
            <div class="timeline-content-icon">
              <div class="rejected" *ngIf="a.type === 'reject'">!</div>
              <img src="assets/img/icon-broadcasted.svg" *ngIf="a.type === 'broadcasted'">
              <div class="line" *ngIf="a.type !== 'reject' && a.type !== 'broadcasted'">{{actionList.length - i}}</div>
            </div>
            <div class="timeline-content-label">
              <div class="action ellipsis">{{a.description}}</div>
              <div class="name ellipsis">{{a.by}}</div>
            </div>
            <ion-note class="ellipsis">
              <time *ngIf="a.time">{{ a.time * 1000 | amTimeAgo}}</time>
            </ion-note>
          </div>
        </div>
      </div>

      <div class="line-divider"></div>

      <ion-row justify-content-center class="background-button-content">
        <div class="background-content">
          <button ion-button clear (click)="viewOnBlockchain()">
            {{'View on blockchain' | translate}}
          </button>
        </div>
      </ion-row>

    </ion-list>

  </div>
</wide-header-page>